<template>

  <div class="mnxl-left">
    <div class="mnxl-left-top">
      <div class="lefthead_con">
        <img class="lefthead_con_img" :src="tableimg" alt="">
      </div>
    </div>
    <!--  -->
    <div class="mnxl-left-form">
      <el-form class="mnxl-left-form-box" ref="simulatedRef" :model="simulatedform" label-width="120px"
        label-position="right" :rules="simulatedrules">
        <el-form-item label="模拟事件类型：" prop="simulateEventType">
          <el-radio-group v-model="simulatedform.simulateEventType" @change="changeradioform">
            <el-radio-button label="H辐射" value="H辐射" />
            <el-radio-button label="SW污染" value="SW污染" />
            <el-radio-button label="HX污染" value="HX污染" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模拟事件名称：" prop="simulateEventName">
          <el-select popper-class="form-select" v-model="simulatedform.simulateEventName" placeholder="请选择模拟事件名称">
            <el-option v-for="option in simulationListName" :key="option.value" :label="option.label"
              :value="option.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="模拟训练场景：" prop="count">
          <el-select popper-class="form-select" v-model="simulatedform.simulateTrainingScene" placeholder="请选择模拟训练场景">
            <el-option v-for="option in simulationSceneName" :key="option.value" :label="option.label"
              :value="option.value" />
          </el-select>
        </el-form-item>
        <div class="form-text">特征参数</div>
        <Nuclearform v-if="simulatedform.simulateEventType == 'H辐射'" formtext="H辐射" ref="comformref"
          @formsubmit="editsub" />

        <Biologyform v-if="simulatedform.simulateEventType == 'SW污染'" ref="comformref" formtext="SW污染"
          @formsubmit="editsub" />

        <Chemistryform v-if="simulatedform.simulateEventType == 'HX污染'" formtext="HX污染" ref="comformref"
          @formsubmit="editsub" />


        <div class="form-btn">
          <el-button class="form-btn-sub" @click="simulatedsub">开始</el-button>
          <div class="form-btn-group">
            <el-button class="form-btn-group-item" @click="simulatedreset">重置</el-button>
            <el-button class="form-btn-group-item" @click="temption">模板生成</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
  <!--  -->
  <div class="mnxl-left-img">
    <el-popover placement="top-start" popper-class="mnxl-left-img-popover" :width="150" trigger="click">
      <template #reference>
        <img class="mnxl-left-img-img" src="../../../../../assets/img/mnxl/lefticon.png" />
      </template>
      <div class="mnxl-left-img-title">地图显示</div>

      <div v-for="(item, index) in iconItems" :key="item.id" class="mnxl-left-img-item" @click="toggleIcon(index)">
        <div class="mnxl-left-img-item-icon" v-show="!item.visible"></div>
        <img class="mnxl-left-img-item-show" src="../../../../../assets/img/mnxl/lefticonttrue.png"
          v-show="item.visible" />
        <div class="mnxl-left-img-item-text">{{ item.text }}</div>
      </div>
    </el-popover>
  </div>

  <Eldioa :headtext="Eldioaform.headtext" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible"
    :elwidth="Eldioaform.elwidth" :elheight="Eldioaform.elheight">
    <template #dialogbody>
      <Elfrom :form-config="editformdataconfig" v-model="editform" :show-actions="false" @elsubmit="elsubmitbtn"
        ref="editformRef" />

      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="elhandleSubmit">
          确认
        </el-button>
        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>
      </div>

    </template>
  </Eldioa>

</template>

<script setup>
import { ref, onMounted, inject, computed } from 'vue'
import { getsimulationListName, getsimulationSceneName, postsimulationadd, getteamGroup } from '@/api'

import Eldioa from '@/components/eldioa/index.vue'
import Elfrom from '@/components/elfrom/index.vue'
import formConfig from './mnformconfig'

import lefthead from '@/assets/img/mnxl/leftheadtext.png'
import Nuclearform from '@/views/left/mnxl/components/left/components/nuclearform.vue'
import Biologyform from '@/views/left/mnxl/components/left/components/biologyform.vue'
import Chemistryform from '@/views/left/mnxl/components/left/components/chemistryform.vue'

// 注入父组件提供的方法
const startCountdown = inject('startCountdown')

const tableimg = ref(lefthead)


//
const simulatedRef = ref(null)


const simulatedform = ref({
  simulateEventType: 'H辐射',
  simulateEventName: '',
  simulateTrainingScene: '',
})

const simulatedrules = ref({
  simulateEventType: [
    {
      required: true, message: '请选择模拟事件类型', trigger: 'blur'
    }
  ],
  simulateEventName: [
    {
      required: true, message: '请选择模拟事件名称', trigger: 'blur'
    }

  ],
})
const comformref = ref()


const changeradioform = () => {
  comformref.value.handleReset()


}


const simulatedsub = () => {
  if (!simulatedRef.value) return
  simulatedRef.value.validate((valid) => {
    if (valid) {
      comformref.value.handleSubmit()
      sessionStorage.setItem('mnxl_simulateEventType', simulatedform.value.simulateEventType)
      startCountdown()
    } else {
      console.log('表单验证失败')
    }
  })
}

const formall = ref({})

const editsub = async (formdata, type) => {

  const form = { ...simulatedform.value, ...formdata }
  formall.value = form

  if (type == '模板') {
    editdialogVisible.value = true
    const teamGroup = await getteamGroup()
    formConfig.TemplateGeneration[1].columns[1].options = teamGroup.data
  } else {
    sessionStorage.setItem('mnxl_data', JSON.stringify({
      simulatedformdata: simulatedform.value,
      formdatadata: formdata
    }))
  }
}

const simulatedreset = () => {
  simulatedRef.value.resetFields()
  Object.keys(simulatedform.value).forEach(key => {
    if (key == 'simulateEventType') {
      simulatedform.value[key] = 'H辐射'
    } else {
      simulatedform.value[key] = ''
    }
  })
  comformref.value.handleReset()
}


const temption = () => {
  if (!simulatedRef.value) return
  simulatedRef.value.validate((valid) => {
    if (valid) {
      comformref.value.handleSubmit('模板')
    } else {
      console.log('表单验证失败')
    }
  })
}

const simulationListName = ref([])

const simulationSceneName = ref([])

const getsimulationListNameapi = async () => {
  const { data } = await getsimulationListName()
  simulationListName.value = data
}

const getsimulationSceneNameapi = async () => {
  const { data } = await getsimulationSceneName()
  simulationSceneName.value = data
}

onMounted(() => {
  getsimulationListNameapi()
  getsimulationSceneNameapi()

  let data = sessionStorage.getItem('mnxl_data')
  if (data) {
    data = JSON.parse(data)
    simulatedform.value = data.simulatedformdata
    // formall.value = data.formdatadata
  }
})

//--------------------------

const Eldioaform = ref({
  headtext: '模板生成',
  elwidth: 746,
  elheight: 400,
  formtype: '新增'
})

const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
}



const editformdataconfig = computed(() => {
  let formconfig = null
  formconfig = formConfig.TemplateGeneration

  return formconfig

})

// 表单数据
const editformdata = computed(() => {
  let formdata = null
  formdata = formConfig.TemplateGenerationdata
  return formdata
})


// 表单数据
const editform = ref({ ...editformdata.value })

const editformRef = ref()

// 根据按钮属性提交表单
const elsubmitbtn = async (editsubdata) => {
  console.log('editsubdata', editsubdata)
  let form = { ...formall.value, ...editsubdata }

  formall.value = {}

  await postsimulationadd(form)

  editformRef.value.handleReset()
  formall.value = {}
}


// 确认表单
const elhandleSubmit = async () => {
  if (!editformRef.value) return
  try {
    await editformRef.value.handleSubmit()
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}


// 关闭
const handleCancel = () => {
  if (!editformRef.value) return
  editformRef.value.handleReset()
  editdialogVisible.value = false
}

// 重置表单
const resetFieldsform = (form, comform) => {
  Object.keys(form).forEach(key => {
    if (key in comform) {
      form[key] = comform[key]
    } else {
      form[key] = ''
    }
  })
}


// 图标数据数组
const iconItems = ref([
  { id: 1, text: '监控设备', visible: false },
  { id: 2, text: '伤亡人员', visible: false },
  { id: 3, text: 'XX区域', visible: false }
])

// 切换图标显示状态的方法
const toggleIcon = (index) => {
  iconItems.value[index].visible = !iconItems.value[index].visible
}

</script>

<style lang="less" scoped>
.mnxl-left {
  position: absolute;
  left: 0;
  width: 430px;
  z-index: 2;
  // background: red;
  height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条但仍可滚动 */
  scrollbar-width: none;
  background: rgba(21, 33, 86, 0.6);
  margin-left: 35px;

  .mnxl-left-form {
    height: 850px;
    padding: 0 25px;

    .mnxl-left-form-box {
      margin-top: 20px;

      .form-text {
        width: 48px;
        height: 17px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #8CCBFF;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        margin-left: 14px;
      }

      .form-btn {
        margin-top: 30px;
        text-align: center;

        .form-btn-sub {
          width: 300px;
          height: 38px;
          border: none;
          background: #FE0404;
          border-radius: 4px;
          color: #fff;
        }

        .form-btn-group {
          margin-top: 12px;
          display: flex;
          text-align: center;
          justify-content: center;

          .form-btn-group-item {
            width: 146px;
            height: 36px;
            border-radius: 4px;
            border: 1px solid #8FC9FF;
            background: transparent;
            color: rgba(148, 204, 255, 1);
          }
        }
      }
    }
  }



}

.mnxl-left-img {
  position: absolute;
  bottom: 33px;
  z-index: 3;
  left: 475px;


  .mnxl-left-img-img {
    width: 42px;
    height: 42px;
    cursor: pointer;
  }



}



.mnxl-left-img-title {
  font-size: 18px;
  color: #64B2FF;
  line-height: 25px;
  margin-bottom: 10px;
}

.mnxl-left-img-item {
  display: flex;
  font-size: 14px;
  color: #A8D6FF;
  line-height: 20px;
  align-items: center;
  margin: 8px 0;
  cursor: pointer;

  .mnxl-left-img-item-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2D4F67;

    margin-right: 14px;
    border: 1px solid #fff;
  }

  .mnxl-left-img-item-show {
    width: 16px;
    height: 16px;
    margin-right: 14px;

  }


  .mnxl-left-img-item-text {}
}

.lefthead_con {
  width: 430px;
  background: url(../../../../../assets/img/mnxl/lefthead.png);
  background-size: 100% 100%;
  height: 46px;
  position: relative;
  top: 0px;
  display: flex;
  align-items: center;
  z-index: 3;

  .lefthead_con_img {
    // width: 20px;
    height: 26px;
    margin-right: 6px;
    margin-left: 12px;
    margin-top: 3px;
  }

  .lefthead_con_text {
    height: 22px;
    font-family: ZHDH, ZHDH;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    background: linear-gradient(to bottom, #FFFFFF 0%, #92CDFF 100%);
    /* 渐变背景 */
    -webkit-background-clip: text;
    /* 将背景裁剪到文字 */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 文字填充色透明，显示背景渐变 */
    color: transparent;
  }
}

:deep(.el-form-item__label) {
  color: #fff;
}

:deep(.el-radio-group) {
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
}

:deep(.el-radio-button__inner) {
  background: rgba(17, 55, 91, 1);
  border: none;
  color: #fff;
  width: 84px;
  height: 32px;
  border-radius: 4px !important;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  width: 84px;
  height: 32px;
  border-radius: 4px !important;
  border: none;
}

:deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner) {
  border: none;
  background: linear-gradient(0deg, #2A97FF 0%, #72E5FF 100%);
}
</style>

<style>
.mnxl-left-img-popover {
  background: RGBA(15, 32, 48, 0.6) !important;
  border: none;
  border-bottom: 2px solid RGBA(100, 178, 255, 1);
}

.mnxl-left-img-popover.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  border: none;
  border-bottom: 2px solid RGBA(100, 178, 255, 1) !important;
    background: linear-gradient(315deg, #64b2ff 50%, #0b1a2c 50%);
}
</style>